<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
    String path = request.getContextPath();
%>
<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <link href="<%=path%>/static/css/index.css?3i004503ee9" rel="stylesheet" type="text/css">
    <%--<style type="text/css">--%>
        <%--* { -ms-word-wrap: break-word; word-wrap: break-word; }--%>
        <%--html { -webkit-text-size-adjust: none; text-size-adjust: none; }--%>
        <%--html, body {height:99%;width:99%; }--%>
        <%--.wrap{width:464px;height:34px;margin:20px auto;border:0;position:relative;}--%>
        <%--.input{position:absolute;top:0;left:0;width:457px;margin:0;padding-left:5px;height:30px;line-height:30px;font-size:12px;border:1px solid #c9cacb;}--%>
        <%--s{position:absolute;top:1px;right:0;width:32px;height:32px;background:url("<%=path%>/static/images/arrow.png") no-repeat;}--%>
        <%--._citys { width: 450px; display: inline-block; border: 2px solid #eee; padding: 5px; position: relative; }--%>
        <%--._citys span { color: #05920a; height: 15px; width: 15px; line-height: 15px; text-align: center; border-radius: 3px; position: absolute; right: 10px; top: 10px; border: 1px solid #05920a; cursor: pointer; }--%>
        <%--._citys0 { width: 95%; height: 34px; line-height: 34px; display: inline-block; border-bottom: 2px solid #05920a; padding: 0px 5px; font-size:14px; font-weight:bold; margin-left:6px; }--%>
        <%--._citys0 li { display: inline-block; line-height: 34px; font-size: 15px; color: #888; width: 80px; text-align: center; cursor: pointer; }--%>
        <%--._citys1 { width: 100%; display: inline-block; padding: 10px 0; }--%>
        <%--._citys1 a { width: 83px; height: 35px; display: inline-block; background-color: #f5f5f5; color: #666; margin-left: 6px; margin-top: 3px; line-height: 35px; text-align: center; cursor: pointer; font-size: 12px; border-radius: 5px; overflow: hidden; }--%>
        <%--._citys1 a:hover { color: #fff; background-color: #05920a; }--%>
        <%--.AreaS { background-color: #05920a !important; color: #fff !important; }--%>
    <%--</style>--%>
    <title></title>
</head>
<body>
<header>
    <div id="topnav">
        <div class="topnav">
            <ul>
                <li><a href="<%=path%>/web/garbage/index" title="">首页</a></li>
                <li><a href="<%=path%>/web/article/aboutUs" title="">关于我们</a></li>
                <li><a href="<%=path%>/web/article/development">开发团队</a></li>
                <li><a href="<%=path%>/web/article/articleList">文论</a></li>
                <li><a href="<%=path%>/web/question/list">问答</a></li>
                <c:if test="${not noUser}">
                    <li>
                        <a href="<%=path%>/web/usercenter/usPassport"
                           title="个人中心">${sessionScope.userinfo.nickname} </a>
                    </li>
                </c:if>
            </ul>
            <ol>
                <li><span id="area">地区：${sessionScope.province}/${sessionScope.city}</span></li>
                <li class="region open">
                    <a href="script:void(0);" class="bunt">更换</a>
                    <div class="navigation">
                        <div class="close"><a href="#">关闭</a></div>
                        <div class="select">
                            <%--<div class="wrap"><input class="input" name="" id="city" type="text" placeholder="请选择" autocomplete="off" readonly="true"><s></s></div>--%>
                            <select id="province" name="省">
                            <option value="null">请选择省</option>
                            <c:forEach items="${requestScope.provinces}" var="province">
                            <option value="${province.id}">${province.name}</option>
                            </c:forEach>
                            </select>
                            <select id="city" name="市">
                            <option value="null">请选择市</option>
                            </select>
                        </div>
                    </div>
                </li>
                <c:if test="${empty sessionScope.userinfo}" var="noUser">
                    <li><a href="<%=path%>/web/userinfo/login" title="">登录/注册</a></li>
                </c:if>
                <c:if test="${not noUser}">
                    <li>
                        <a style="padding: 0px" href="<%=path%>/web/usercenter/usPassport"><img
                                src="<%=path%>/static/images/${sessionScope.userinfo.headPic }"></a>
                    </li>
                    <%--<li><a>个人中心</a></li>--%>
                    <li><a href="<%=path%>/web/userinfo/exit">退出登录</a></li>
                </c:if>
            </ol>
        </div>
    </div>
</header>
<section>
    <h1><a href="http://fenlicx.qinglab.cn" title="再搜索垃圾分类查询">再搜索</a></h1>
    <div class="seach">
        <form class="submitForm" method="post" action="<%=path%>/web/garbage/search">
            <input type="text" name="search" class="seach_txt" id="seach">
            <input type="submit" class="seach_bun" name="button" id="button" value="查询分类">
        </form>
        <div class="classify">
            <ul id="type">
                <c:forEach items="${requestScope.garbageTypes}" var="garbageType">
                    <li>
                        <a href="<%=path%>/web/garbage/result?typeId=${garbageType.id}&textureId=null">${garbageType.title}</a>
                    </li>
                </c:forEach>
            </ul>
        </div>
    </div>
    <article class="content">
        <div class="main">
            <ul>
                <li>
                    <h2>近100天释放量最大的8个城市</h2>
                    <div id="chart1" class="chart"></div>
                </li>
                <li>
                    <h2>近100天回收率最高的8个城市</h2>
                    <div id="chart2" class="chart"></div>
                </li>
            </ul>
        </div>
        <div class="hot">
            <h2>热点文论</h2>
            <ul>
                <c:forEach items="${requestScope.articles.list}" var="article">
                    <li><a href="<%=path%>/web/article/details?id=${article.id}">${article.title}</a></li>
                </c:forEach>
            </ul>
        </div>
    </article>
</section>
<script src="<%=path%>/static/js/jquery-3.3.1.min.js"></script>
<script src="<%=path%>/static/js/echarts.min.js"></script>
<script type="text/javascript" src="<%=path%>/static/js/Popt.js"></script>
<%--给点击按钮添加提交表单事件--%>
<script>
    <%--近100天回收率最高的8个城市--%>
    var cities2 = new Array();
    var recycleData = new Array();
    $(function () {
        $.ajax({
            url: "<%=path%>/recycleData",
            type: "post",
            dataType: "JSON",
            async: false,
            success: function (JSONData) {

                // for (var data in JSONData) {
                //     cities2.push(JSONData[data].title);
                //     recycleData.push(JSONData[data].percentage);
                // }
                for (var i = 0;i<JSONData.length;i++){
                    cities2.push(JSONData[i].title);
                    recycleData.push(JSONData[i].percentage);
                }

                myChart2.setOption(option2);

            }
        })
    })


    <%--近100天释放量最大的8个城市--%>
    var cities1 = new Array();
    var outData = new Array();
    $(function () {
        $.ajax({
            url: "<%=path%>/outData",
            type: "post",
            dataType: "JSON",
            async: false,
            success: function (JSONData) {
                // for (var data in JSONData) {
                //     cities1.push(JSONData[data].title);
                //     outData.push(JSONData[data].outData);
                // }
                for (var i = 0;i<JSONData.length;i++){
                    cities1.push(JSONData[i].title);
                    outData.push(JSONData[i].outData);
                }

                myChart.setOption(option);

            }
        })
    })

    var myChart = echarts.init(document.getElementById('chart1'));
    var myChart2 = echarts.init(document.getElementById('chart2'));
    option2 = {
        color: ['#3398DB'],
        tooltip: {
            trigger: 'axis',
            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
        },
        grid: {
            left: '3%',
            right: '2%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: [
            {
                type: 'category',
                data: cities2,
                axisTick: {
                    alignWithLabel: true
                }
            }
        ],
        yAxis: [
            {
                type: 'value'
            }
        ],
        series: [
            {
                name: '回收率',
                type: 'bar',
                barWidth: '50%',
                data: recycleData,
            }
        ]
    };

    option = {
        color: ['#3398DB'],
        tooltip: {
            trigger: 'axis',
            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                type: 'line'        // 默认为直线，可选为：'line' | 'shadow'
            }
        },
        grid: {
            left: '3%',
            right: '2%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: [
            {
                type: 'category',
                data: cities1,
                axisTick: {
                    alignWithLabel: true
                }
            }
        ],
        yAxis: [
            {
                type: 'value'
            }
        ],
        series: [
            {
                name: '释放量',
                type: 'bar',
                barWidth: '50%',
                data: outData,
            }
        ]
    };

    $(function () {
        $(".seach_bun").click(function () {
            var text = $(".seach_txt").val();
            if (text.trim() == "") return;
            else {
                $(".submitForm").submit();
            }
        });
    })
</script>
<script>
    //给更换按钮加点击事件
    $(function () {
        $(".bunt").click(function () {
            $(this).parent().attr("class", "region off");
        });
        <%--//给省份加change事件--%>
        $("#province").change(function () {
        var id = $(this).val();
        $("#city").empty();
        if (id == null) {
        return
        } else {
        $.ajax({
        url: "<%=path%>/web/garbage/findCity",
        type: "GET",
        data: {id: id},
        success: function (data) {
        $("#city").append("<option value='null'>请选择城市</option>");
        $(data).each(function () {
        $("#city").append("<option  value=" + this.id + ">" + this.name + "</option>");
        });

        }
        })
        }

        });
        //给关闭按钮添加事件
        $(".close").click(function () {
            $(this).parent().parent().attr("class", "region open");
        });
        //给市加change事件
        $("#city").change(function () {
        var cid = $(this).val();
        var pid = $("#province").val();
        if (cid == null) {
        return
        } else {
        var provinceName = $("#province option[value=" + pid + "]").text();
        var cityName = $("#city option[value=" + cid + "]").text();
        $(this).parent().parent().parent().attr("class", "region open");
        //利用ajax更改session中的city
        $.ajax({
        url: "<%=path%>/web/garbage/changeCity",
        type: "GET",
        data: {provinceName: provinceName, cityName: cityName, cityId: cid, provinceId: pid},
        success: function (data) {
        $("#area").html("地区：" + provinceName + "/" + cityName + "");
        }
        })
        //利用ajax更改首页的分类
        $.ajax({
        url: "<%=path%>/web/garbage/changeType",
        type: "GET",
        data: {provinceId: pid},
        success: function (data) {
        $("#type").empty();
        $(data).each(function () {
        $("#type").append("<li><a href='<%=path%>/web/garbage/result?typeId=" + this.id + "textureId=null'>" + this.title + "</a></li>");

        })


        }
        })

        }
        });
    })
</script>

<%--B=======================================--%>
<%--<script>--%>
    <%--//给更换按钮加点击事件--%>
    <%--$(function () {--%>
        <%--$(".bunt").click(function () {--%>
            <%--$(this).parent().attr("class", "region off");--%>
        <%--});--%>
        <%--//给关闭按钮添加事件--%>
        <%--$(".close").click(function () {--%>
            <%--$(this).parent().parent().attr("class", "region open");--%>
        <%--});--%>
    <%--})--%>
<%--</script>--%>



<%--<script>--%>
    <%--$(function(){--%>
        <%--var provinceName=null;--%>
        <%--var cityName=null;--%>
        <%--var provinceId=null;--%>
        <%--var cityId=null;--%>
        <%--$("#city").click(function (e) {--%>
            <%--SelCity(this,e);--%>
        <%--});--%>
        <%--$("s").click(function (e) {--%>
            <%--SelCity(document.getElementById("city"),e);--%>
        <%--});--%>
        <%--//显示省份--%>
        <%--function SelCity(obj, e) {--%>
            <%--var ths = obj;--%>
            <%--var dal = '<div  class="_citys"><span title="关闭" id="cColse" >×</span><div id="_citysheng"  class="_citys0">请选择省份</div><div id="_citys0" class="_citys1"></div><div style="display:none" id="_citys1" class="_citys1"></div><div style="display:none" id="_citys2" class="_citys1"></div></div>';--%>
            <%--Iput.show({--%>
                <%--id: ths,--%>
                <%--event: e,--%>
                <%--content: dal,--%>
                <%--width: "470"--%>
            <%--});--%>
            <%--$("#cColse").click(function() {--%>
                <%--Iput.colse()--%>
            <%--});--%>
            <%--var tb_province = [];--%>
            <%--var data=${requestScope.provinces};--%>
            <%--$(data).each(function () {--%>
                <%--tb_province.push('<a data-id="' + this.id + '" data-name="' + this.name + '" title="' + this.name + '">' + this.name + '</a>')--%>
            <%--});--%>
            <%--$("#_citys0").append(tb_province.join(""));//把省显示出来--%>
            <%--$("#_citys0 a").click(function() {--%>
                <%--provinceName=$(this).data("name");--%>
                <%--provinceId=$(this).data("id");--%>
                <%--var g = getCity($(this));//调用查询城市的方法--%>
                <%--$("#_citys1 a").remove();//清除之前的省--%>
                <%--$("#_citys1").append(g);//把市放进去--%>
                <%--$("._citys1").hide();--%>
                <%--$("._citys1:eq(1)").show();--%>
                <%--$("#_citys0 a,#_citys1 a,#_citys2 a").removeClass("AreaS");--%>
                <%--$(this).addClass("AreaS");--%>
                <%--var lev = $(this).data("name");--%>
                <%--ths.value = $(this).data("name");--%>
                <%--if (document.getElementById("hcity") == null) {--%>
                    <%--var hcitys = $('<input>', {--%>
                        <%--type: 'hidden',--%>
                        <%--name: "hcity",--%>
                        <%--"data-id": $(this).data("id"),--%>
                        <%--id: "hcity",--%>
                        <%--val: lev--%>
                    <%--});--%>
                    <%--$(ths).after(hcitys)--%>
                <%--} else {--%>
                    <%--$("#hcity").val(lev);--%>
                    <%--$("#hcity").attr("data-id", $(this).data("id"))--%>
                <%--}--%>
                <%--$("#_citys1 a").click(function() {--%>
                    <%--cityName=$(this).data("name");--%>
                    <%--cityId=$(this).data("id");--%>
                    <%--$("#_citys1 a,#_citys2 a").removeClass("AreaS");--%>
                    <%--$(this).addClass("AreaS");--%>
                    <%--var lev = $(this).data("name");--%>
                    <%--if (document.getElementById("hproper") == null) {--%>
                        <%--var hcitys = $('<input>', {--%>
                            <%--type: 'hidden',--%>
                            <%--name: "hproper",--%>
                            <%--"data-id": $(this).data("id"),--%>
                            <%--id: "hproper",--%>
                            <%--val: lev--%>
                        <%--});--%>
                        <%--$(ths).after(hcitys)--%>
                    <%--} else {--%>
                        <%--$("#hproper").attr("data-id", $(this).data("id"));--%>
                        <%--$("#hproper").val(lev)--%>
                    <%--}--%>
                    <%--var bc = $("#hcity").val();--%>
                    <%--ths.value = bc + "/" + $(this).data("name");--%>

                    <%--//利用ajax更改session中的city--%>
                    <%--$.ajax({--%>
                    <%--url: "<%=path%>/web/garbage/changeCity",--%>
                    <%--type: "GET",--%>
                    <%--data: {provinceName: provinceName, cityName: cityName, cityId: cityId, provinceId: provinceId},--%>
                    <%--success: function (data) {--%>
                    <%--$("#area").html("地区：" + provinceName + "/" + cityName + "");--%>
                    <%--}--%>
                    <%--});--%>

                    <%--//利用ajax更改首页的分类--%>
                    <%--$.ajax({--%>
                    <%--url: "<%=path%>/web/garbage/changeType",--%>
                    <%--type: "GET",--%>
                    <%--data: {provinceId: provinceId},--%>
                    <%--success: function (data) {--%>
                    <%--$("#type").empty();--%>
                    <%--$(data).each(function () {--%>
                    <%--$("#type").append("<li><a href='<%=path%>/web/garbage/result?typeId=" + this.id + "textureId=null'>" + this.title + "</a></li>");--%>

                    <%--})--%>


                    <%--}--%>
                    <%--})--%>

                <%--})--%>
            <%--})--%>
        <%--}--%>

        <%--// 显示市的方法--%>
        <%--function getCity(obj) {--%>
            <%--var id = obj.data('id');--%>
            <%--var g = '';--%>
            <%--$.ajax({--%>
                <%--url: "<%=path%>/web/garbage/findCity",--%>
                <%--async:false,--%>
                <%--type: "GET",--%>
                <%--data: {id: id},--%>
                <%--success: function (data) {--%>
                    <%--$(data).each(function () {--%>
                        <%--$("#city").append("<option  value=" + this.id + ">" + this.name + "</option>");--%>
                        <%--g += '<a data-id="' + this.id + '" data-name="' + this.name + '" title="' + this.name + '">' + this.name + '</a>'--%>
                    <%--});--%>
                <%--}--%>
            <%--});--%>
            <%--$("#_citysheng").html('请选择城市');--%>
            <%--return g--%>
        <%--}--%>

    <%--});--%>



<%--</script>--%>

<footer>
    <jsp:include page="/web/inc/footer"/>
</footer>
</body>
</html>
